<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单信息</span>
      </div>
      <div>
        <el-descriptions title="" direction="vertical" :column="3" border>
          <el-descriptions-item :span="1" label="订单编号">{{
            baseOrder.sn
          }}</el-descriptions-item>
          <el-descriptions-item :span="1" label="订单类型">
            <el-tag type="success" v-if="baseOrder.type == 2">实物订单</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="订单状态">
            <el-tag type="primary" v-if="baseOrder.status == 1">待付款</el-tag>
            <el-tag type="primary" v-if="baseOrder.status == 2">待发货</el-tag>
            <el-tag type="primary" v-if="baseOrder.status == 3">待收货</el-tag>
            <el-tag type="primary" v-if="baseOrder.status == 4">已完成</el-tag>
            <el-tag type="primary" v-if="baseOrder.status == 6">已退款</el-tag>
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="用户姓名">
            {{ baseOrder.consigneeName }}
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="用户手机号">
            {{ baseOrder.consigneePhone }}
          </el-descriptions-item>
          <el-descriptions-item
            :span="1"
            label="订单金额"
            v-if="$auth.hasPermi('cancel:order:company')"
          >
            {{ baseOrder.moneyAmount }}元
          </el-descriptions-item>
          <el-descriptions-item
            :span="1"
            label="原价"
            v-if="$auth.hasPermi('cancel:order:company')"
          >
            {{ baseOrder.originalMoneyAmount }}元
          </el-descriptions-item>
          <el-descriptions-item
            :span="1"
            label="优惠金额"
            v-if="$auth.hasPermi('cancel:order:company')"
          >
            {{ baseOrder.giveMoneyAmount }}元
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="支付时间">
            {{ baseOrder.payTime }}
          </el-descriptions-item>
          <el-descriptions-item :span="3" label="收货地址">
            {{ baseOrder.shippingAddress }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品信息</span>
      </div>
      <div>
        <el-descriptions
          v-for="item in orderGoods"
          :key="item.orderId"
          title=""
          direction="column"
          :column="2"
          border
          style="margin-bottom: 20px"
        >
          <el-descriptions-item :span="1" label="商品名称">
            {{ item.productName }}
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="商品数量">
            {{ item.buyNum }}
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="商品价格">
            {{ item.shopPrice }}元
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="商品规格">
            {{ item.skuMsg }}
          </el-descriptions-item>
          <el-descriptions-item :span="1" label="商品图片">
            <el-image
              style="width: 100px; height: 100px"
              :src="item.previewImg"
              fit="fit"
            ></el-image>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>
  </div>
</template>
<script>
import { orderListId } from "@/api/system/orderSuper.js";
export default {
  name: "OrderDetail",
  data() {
    return {
      baseOrder: {},
      orderAddresses: {},
      orderGoods: [],
    };
  },
  props: {
    orderId: Number,
  },
  mounted() {
    this.getOrderDetail();
  },
  methods: {
    getOrderDetail() {
      orderListId({ orderId: this.orderId }).then((res) => {
        this.baseOrder = res.data;
        this.orderGoods = res.data.goodsList;
      });
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  height: 600px;
  overflow: auto;
  .box-card {
    margin-bottom: 20px;
  }
}
</style>
